<template>
  <div ref="ellipse" class="marquee-panel">
    <div 
      v-for="(item, index) in points" 
      :key="index" 
      :class="[
        'center',
        'circle',
        linkClass(item, index)
      ]"
      :style="circleStyles(index)">
      <img :src="require('@/assets/images/' + item.alias + '.png')" :alt="item.label" />
    </div>
    <div class="inner center">
      <div class="inner-box between-xc">
        <DigitalNumber :value="game.history.ref" :len="6" />
        <DigitalNumber :value="game.multiple.ref" :len="2" />
        <div class="color between-x">
          <div :class="'color-circle center ' + linkColorClass(color)" v-for="(color, index) in colorLamps" :key="index">{{ color.label }}</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { random, size } from 'lodash'
import { useIntervalFn } from '@vueuse/core'
import { getGamePoint } from '@/utils/game'
import DigitalNumber from './DigitalNumber.vue'
import { usePointsRef, useColorLampsRef } from '@/composables/useButton'
import { ref, computed } from 'vue'
import { Color, Item, Point, TColor } from '@/utils/types'
const ellipse = ref<HTMLElement | null>(null)
const points = usePointsRef()
const colorLamps = useColorLampsRef()
import useStore from '@/composables/useStore'
const { game, color } = useStore()

const isBlinking = ref(false)
const isColorBlinking = ref(false)

const linkClass = (item: Point, index: number) => {
  if (isBlinking.value && game.pointer === index) {
    return 'blinking-' + color.current
  }
  return 'bg-' + item.color
}

const linkColorClass = (item: Item<Color>) => {
  if (isColorBlinking.value && color.current === item.value) {
    return 'blinking-' + color.current
  }
  return 'bg-' + item.value
}

const setColorLamps = (pair: Array<number>, color: TColor) => {
  pair.forEach((i: number) => {
    colorLamps.value[i].value = color
  })
}

const clearColorLamps = () => {
  colorLamps.value.forEach((k) => {
    k.value = ''
  })
}

const initColorLamps = () => {
  if (color.current === 'red') {
    setColorLamps([0, 1], 'red')
  } else if (color.current === 'yellow') {
    setColorLamps([2, 3], 'yellow')
  } else {
    setColorLamps([4, 5], 'green')
  }
}


const clearPoints = () => {
  points.value.forEach((k) => {
    k.color = ''
  })
}

const circleStyles = computed(() => {
  if (!ellipse.value) return () => ({})
  const s = 30
  const a = ellipse.value.offsetWidth / 2 - 16 - s
  const b = ellipse.value.offsetHeight / 2 - 16 - s
  const centerX = ellipse.value.offsetWidth / 2
  const centerY = ellipse.value.offsetHeight / 2
  return (index: number) => {
    const angle = (index / size(points.value)) * 2 * Math.PI + 0.25
    const x = centerX + a * Math.cos(angle) - s
    const y = centerY + b * Math.sin(angle) - s
    return {
      transform: `translate(${x}px, ${y}px)`
    }
  }
})

const timer3 = useIntervalFn(() => {
  clearColorLamps()
  const colorStep = (color.step + 1) % 3
  if (colorStep === 0) {
    setColorLamps([0, 1], 'red')
  } else if (colorStep === 1) {
    setColorLamps([2, 3], 'yellow')
  } else if (colorStep === 2) {
    setColorLamps([4, 5], 'green')
  }
  color.step++
}, 300)

const init = () => {
  game.history.timer.resume()
  game.multiple.timer.pause()
  timer3.pause()
}

const stop = () => {
  init()
  isColorBlinking.value = true
  game.multiple.ref = random(1, 19)
  game.running = false
  clearColorLamps()
  initColorLamps()
}

const blink = (handler: () => void) => {
  isBlinking.value = true
  setTimeout(() => {
    handler && handler()
  }, 2500)
}

const runMarquee = () => {
  let step = 0, lap = 0;
  let currentIndex = game.pointer - 1
  const marqueeCount = 3
  const size = points.value.length
  const rest = getGamePoint()
  const { pause, resume } = useIntervalFn(() => {
    clearPoints()
    currentIndex = (currentIndex + 1) % size
    for (let i = 0; i < marqueeCount; i++) {
      const index = (currentIndex + i) % size
      points.value[index].color = color.current
    }
    game.pointer = currentIndex
    step++
    lap = (step - rest) / size
    if (lap > 3) {
      pause()
      clearPoints()
      blink(stop)
    }
  }, 30)
  resume()
}

const start = () => {
  game.history.timer.pause()
  game.multiple.timer.resume()
  initColorLamps()
  timer3.resume()
  game.history.ref = random(1, 160)
  color.push()
  blink(() => {
    isBlinking.value = false
    runMarquee()
  })
}

defineExpose({ init, start, stop })

</script>
